<template>
  <div>
    <header id="navigator">
      <div>
        <div class="logo-icon">
          <a href="/?index" style="cursor: pointer;">
            <img class="logo" src="../../../static/z39pc/images/logo.png" height="45">
          </a>
        </div>
      </div>

      <div class="user-info" v-show="timeUserInfo">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner">
            <img :src="userImg||'//cdns.7dtime.com/z39/images/default.jpg'" style="margin-right: 10px;" /> {{userName}}</span>
          <el-dropdown-menu slot="dropdown" style="margin: 5px 0;border: 1px solid #d1dbe5;box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.12);padding: 6px 0;z-index: 10;position: absolute;top: 0;left: 0;min-width: 100px;box-sizing: content-box;">
            <el-dropdown-item @click.native="doMyInfo" style="padding: 0 10px;">我的消息</el-dropdown-item>
            <el-dropdown-item @click.native="doSetting" style="padding: 0 10px;">设置</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout" style="padding: 0 10px;">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--<img v-bind:src="userImg||'../../../static/z39pc/images/avatar.png'" />
				<span>{{userName}}</span>-->
      </div>
      <div id="header-input-container" class="header-input-container" v-show="timeUserInfo">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="taskInputSearch" @change="taskSearch" @clear="clearInputSearch">
        </el-input>
        <ul class="list" :class="{shorten: searchResult.length === 0}" v-if="taskInputSearch">
          <li v-for="item in searchResult" :key="item.id" @click="showTaskDetail(item.id)">{{item.title}}</li>
          <li class="no-data" v-if="noDataShow">暂无相关任务</li>
        </ul>
      </div>
      <div class="user-login-btn" @click="showLoginDialog()" v-show="!timeUserInfo">
        登录
      </div>
      <div class="nav-list">
        <ul>
          <li :class="currentRouteName=='任务'?'active':''">
            <router-link to="/task" tag="a">任务</router-link>
          </li>
          <li :class="currentRouteName=='总结'?'active':''">
            <router-link to="/note" tag="a">总结</router-link>
          </li>
          <li :class="currentRouteName=='建议'||currentRouteName=='需求'?'active':''">
            <router-link to="/needAndAdvice" tag="a">建议</router-link>
          </li>
          <li :class="currentRouteName=='档案库'?'active':''">
            <router-link to="/archive" tag="a">档案库</router-link>
          </li>
          <li :class="currentRouteName=='市场'?'active':''">
            <router-link to="/market" tag="a">市场</router-link>
          </li>
          <li :class="currentRouteName=='博客'?'active':''">
            <router-link to="/blog" tag="a">博客</router-link>
          </li>
          <li>
            <a target="_black" href="https://7dtime.com/mdteach/">教程</a>
          </li>
          <li>
            <a target="_black" href="http://tlog.7dtime.com/pro52SJRZ/">功能</a>
          </li>
          <li>
            <a target="_black" href="https://7dtime.com/api/">开放接口</a>
          </li>
          <li>
            <a target="_black" href="https://7dtime.com/timemanage/">时间管理</a>
          </li>
          <li>
            <a target="_black" href="https://7dtime.com/aboutus/">关于我们</a>
          </li>
          <!--<li >
						<router-link to="task" tag="a" >价格</router-link>
					</li>-->
          <!--<li>
						<router-link to="task" tag="a">大冒险</router-link>
					</li>-->
          <!--
					<li >
						<router-link to="task" tag="a" >学习</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >公司</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >合作</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >经典</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >群组</router-link>
					</li>-->
        </ul>
      </div>
      <!-- <div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()">
				<task-detail ref="taskDetailComponent"></task-detail>
			</div> -->
    </header>
    <login-dialog ref="loginDialog"></login-dialog>
  </div>
</template>
<script>
  import loginDialog from './login.vue'
  import api from '../../api';
  import {
    taskAndTag
  } from "../../common/mixin";
  import {
    mixinPc
  } from "../../common/mixinPc";
  import _ from "underscore";
  // import taskDetail from '../task/taskDetail.vue'
  import {
    bus
  } from "../../common/bus";
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    name: 'headerNav',
    data() {
      return {
        userName: '',
        userImg: '',
        currentRouteName: '',
        timeUserInfo: JSON.parse(localStorage.getItem('timeUserInfo')),
        taskInputSearch: '',
        searchResult: [],
        noDataShow: false,
      }

    },
    components: {
      'login-dialog': loginDialog,
      // 'task-detail': taskDetail
    },
    computed: {
      ...mapState({
        uid: state => state.vux.uid,
        isLogin: state => state.vux.isLogin,
        sid: state => state.vux.sid, //websocket id
        wsLogin: state => state.vux.wsLogin,

      })
    },
    mixins: [taskAndTag, mixinPc],
    watch: {
      'uid': function () {
        var timeUserInfo = JSON.parse(localStorage.getItem('timeUserInfo'))
        if (timeUserInfo && timeUserInfo.uid) {
          this.userName = timeUserInfo.username;
          this.userImg = timeUserInfo.headimgurl;
        }
        this.timeUserInfo = timeUserInfo
      },
      'isLogin': function () {
        this.loginState = this.isLogin
      },
      "$route": function (to, from) {
        this.currentRouteName = this.$route.matched[0].name
      }
    },
    methods: {
      initPage: function () {
        if (this.timeUserInfo) {
          this.usertask(this.timeUserInfo.uid);
          this.userName = this.timeUserInfo.username;
          this.userImg = this.timeUserInfo.headimgurl;
        }
      },
      showLoginDialog: function () {
        this.$refs.loginDialog.loginDialogVisible = true;
      },
      doMyInfo: function () {
        this.showNotice('功能还未完成', 'warning');
      },
      doSetting: function () {
        this.showNotice('功能还未完成', 'warning');
      },
      logout: function () {
        this.$confirm('是否确认退出当前账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit({
            type: "z39/reset"
          });
          this.$store.commit({
            type: "reset"
          });
          localStorage.removeItem('timeUserInfo');
          localStorage.removeItem('tagTmpSortArr');
          this.timeUserInfo = ''
          api.logout({}).then(data => {
            //							this.$store.commit({ type: "z39/reset" });
            //							this.$store.commit({ type: "reset" });
            //							localStorage.removeItem('timeUserInfo');
            //							localStorage.removeItem('tagTmpSortArr');
            //							this.timeUserInfo=''
          })
        })

      },
      checkLogin: function () {
        api.checkLogin({}).then(data => {
          if (data.errno != 0) {
            this.$store.commit({
              type: "reset"
            });
            localStorage.removeItem('timeUserInfo');
            localStorage.removeItem('tagTmpSortArr');
            this.timeUserInfo = ''
          }
        })
      },
      taskSearch: function (val) {
        clearTimeout(this.timer)
        if (!val) {
          this.searchResult = []
          this.taskInputSearch = ''
          return
        }
        var that = this
        this.timer = setTimeout(function () {
          api.taskGet({
            content: val
          }).then(res => {
            console.log('res', res)
            that.searchResult = res.data
            if (res.data.length) {
              that.noDataShow = false
            } else {
              that.noDataShow = true
            }
          })
        }, 1000)
      },
      showTaskDetail: function (taskId) {
        // console.log('taskId', taskId)
        this.clearInputSearch()
        $('.task-detail-container').focus();
        $('.task-detail-container').animate({
          right: '-24px'
        }, 0)
        // this.$refs.taskDetailComponent.showTaskDetail(taskId)
        bus.$emit('toShowTaskDetail', taskId);
      },
      clearInputSearch() {
        console.log('clear')
        this.searchResult = []
        this.taskInputSearch = ''
      }
    },
    mounted() {
      this.checkLogin()
      this.currentRouteName = this.$route.matched[0].name
      this.initPage()
    }
  }
</script>

<style scoped="">
  * {
    /*margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;*/
  }

  #navigator {
    height: 54px;
    z-index: 1000;
    box-shadow: none;
    color: #757575;
    position: fixed;
    width: 100%;
    background: #1d88e5;
    padding: 11px 30px;
    color: #fff;
  }

  #navigator .logo-icon {
    float: left;
  }

  #navigator .logo-icon img {
    height: 45px;
    margin-top: -6px;
    margin-left: 55px;
    /*-12px;*/
    vertical-align: middle;
  }

  #navigator .user-info {
    float: right;
    cursor: pointer;
  }

  #navigator .user-info img {
    height: 32px;
    width: 32px;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.23);
  }

  #navigator .user-info span {
    font-size: 13px;
    margin: 0 20px 0 10px;
    color: #fff;
  }

  #navigator .user-login-btn {
    float: right;
    line-height: 32px;
    height: 32px;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
  }

  #navigator .nav-list {
    width: 60%;
    margin: 0 auto;
    height: 32px;
    line-height: 32px;
  }
@media only screen and (min-width: 0px) and (max-width: 1302px){
  #navigator .nav-list li {
    /*float: left;*/
    padding: 0 0px;
    font-size: 13px;
    margin: 0 5px;
    display: inline-block;
  }
}
@media only screen and (min-width: 1303px) and (max-width: 1439px) {
  #navigator .nav-list li {
    /*float: left;*/
    padding: 0 5px;
    font-size: 14px;
    margin: 0 5px;
    display: inline-block;
  }
}

@media only screen and (min-width: 1410px) and (max-width: 1573px)  {
  #navigator .nav-list li {
    /*float: left;*/
    padding: 0 10px;
    font-size: 14px;
    margin: 0 5px;
    display: inline-block;
  }
}
@media only screen and (min-width: 1574px) and (max-width: 1721px){
  #navigator .nav-list li {
    /*float: left;*/
    padding: 0 15px;
    font-size: 14px;
    margin: 0 5px;
    display: inline-block;
  }
}
@media only screen and (min-width: 1722px){
  #navigator .nav-list li {
    /*float: left;*/
    padding: 0 20px;
    font-size: 14px;
    margin: 0 5px;
    display: inline-block;
  }
}




  #navigator .nav-list li a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }

  #navigator .nav-list li.active {
    background: #0a72cd;
    border-radius: 3px;
  }

  #navigator #header-input-container {
    position: relative;
    float: right;
    width: 200px;
    color: #333;
  }

  #navigator #header-input-container .list {
    position: absolute;
    left: 0;
    top: 42px;
    width: 200px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #d4d4d5;
    overflow-y: scroll;
    z-index: 999;
  }

  #navigator #header-input-container .shorten {
    height: 200px;
  }

  #navigator #header-input-container .list li {
    margin: 10px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #dfdfdf;
    cursor: pointer;
  }

  #navigator #header-input-container .list .no-data {
    height: 150px;
    line-height: 150px;
    border: none;
  }
</style>
